<script>
import dayjs from "dayjs";

export default {
  name: "itemList",
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    detail() {
      let item = this.item
      let imageList = []
      if (item.images) {
        imageList = item.images.split(',').filter(item => item)
      }
      return {
        ...item,
        imageList
      }
    },
  },
  methods: {
    dateFormat(date, f) {
      return dayjs(date).format(f)
    },
    handleDetail(item) {
      uni.navigateTo({
        url: '/pages/resource/detail?id=' + item.id
      })
    },
  }
}
</script>

<template>
  <view class="house-item" @click="handleDetail(item)" style="width: 680rpx">
    <image class="house-image" :src="detail.post_url"/>
    <view class="house-info">
      <view style="width: 100%">
        <view style="width: 100%;display: flex;justify-content:space-between;align-items: center">
          <text class="house-title">{{ detail.name }}</text>
          <view class="house-tags" style="margin: 12rpx 0">
            <text :class="['tag', detail.quantity === 0 ? '' : 'error']">{{detail.quantity === 0 ? '在用' : '闲置'}}</text>
          </view>
        </view>
        <view class="house-detail">
          <text class="location">{{ detail.project_name }}</text>
        </view>
      </view>
      <view class="house-price">
        <text class="price">{{ detail.rental_price }}</text>
      </view>
      <view class="house-detail">
        <div style="display: flex;align-items: center">
          <u-icon name="map-fill" color="#999" size="24"></u-icon>
          <text class="location" style="font-size: 20rpx">{{ detail.province }}{{detail.city }}</text>
        </div>
        <div style="font-size: 20rpx">
          {{ dateFormat(detail.create_time, 'YYYY-MM-DD') }}
        </div>
      </view>

    </view>
  </view>
</template>

<style scoped lang="scss">

.house-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 20rpx 18rpx 12rpx 18rpx;
  margin: 24rpx 0;
  display: flex;
  align-items: center;
}

.house-image {
  width: 240rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 32rpx;
  flex-shrink: 0;
}

.house-info {
  flex-grow: 1;
  height: 180rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.house-detail {
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.location, .area, .type {
  font-size: 14px;
  color: #666666;
}

.house-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6rpx;
}
.house-tags .tag {
  padding: 4rpx 8rpx;
  color: #ffffff;
  background: #ff6b6b;
  border-radius: 6rpx;
  font-size: 20rpx;
  margin-bottom: 4rpx;
}
.house-tags .tag.error {
  color: #ffffff;
  background: #0962c4;
}
.line {
  height: 20rpx;
  width: 2rpx;
  background-color: #DCDCDC;
  margin: 0 24rpx;
}
.house-price {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 24rpx;
  color: #FF6B6B;
  font-weight: bold;
}

.unit {
  font-size: 20rpx;
  color: #FF6B6B;
  margin-left: 4rpx;
}

.unit-price {
  font-size: 24rpx;
  color: #999999;
  margin-right: 24rpx;
}
</style>
